<template>
	<el-upload
		ref="upload"
		class="my-upload"
		action=""
		:on-preview="filePreview"
		:on-remove="fileRemove"
		:file-list="fileList"
		:auto-upload="false"
		list-type="text"
		:limit="1"
		:on-exceed="exceedFiles"
		:http-request="defineUpFile"
	>
		<template #trigger>
			<el-button size="small" type="primary"> 选取文件 </el-button>
		</template>
		<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">
			{{ upLoadBtnText }}
		</el-button>
		<template #tip>
			<div class="el-upload__tip">只能上传视屏格式文件</div>
		</template>
	</el-upload>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { WebApi } from '@/assets/model/httpconfig/WebApi';
import UpFileLoad from '@/assets/model/baseclass/UpFileLoad';
import { UpFileState } from '@/assets/model/enums/EnumUtil';
@Options({
	props: {
		filePath: String,
		limit: Number
	},
	emits: ['changeResult']
})
export default class UpFile extends Vue {
	private upFileResult: any;
	/**上传相对路径 */
	private filePath?: string;
	/**上传文件数量 */
	private limit = 1;
	upLoadBtnText = '上传';
	fileList: any = [];
	/**控制是提交还是更新 */
	mounted() {}
	created() {}
	/**移除上传成功的文件调用函数 */
	fileRemove(file: any, fileList: any) {
		console.log(file, fileList);
	}
	/**点击文件列表中已上传的文件时的钩子 */
	filePreview(file: any) {
		console.log(file);
	}
	exceedFiles(files: any, fileList: any) {
		let _this: any = this;
		_this.$message({
			message: '警告，只能上传一个文件！',
			type: 'warning'
		});
	}
	submitUpload() {
		if (this.upLoadBtnText == '上传') {
			this.upfile.isUpLoad = true;
			this.upLoadBtnText = '暂停';
			let upload: any = this.$refs.upload;
			//更改状态防止无法上传 status="ready" "uploading" "success"
			if (upload.uploadFiles[0].status == UpFileState.uploading) {
				upload.uploadFiles[0].status = UpFileState.ready;
			}
			upload.submit();
		} else {
			this.upfile.isUpLoad = false;
			this.upLoadBtnText = '上传';
			let upload: any = this.$refs.upload;
			upload.abort();
		}
	}
	public upfile = new UpFileLoad();
	//自定义上传文件
	defineUpFile(param: any) {
		this.upfile = new UpFileLoad();
		let _this: any = this;
		this.upfile.file = param.file;
		this.upfile.url = WebApi.fileServePath + '/upfile/isbreakpointbybinary';
		this.upfile.urlMerge = WebApi.fileServePath + '/upfile/mergebinary';
		this.upfile.urlDetMd5 = WebApi.fileServePath + '/upfile/detectionmd5';
		this.upfile.urlDetBin = WebApi.fileServePath + '/upfile/detectionbinary';
		this.upfile.fileParam = param;
		//默认files
		if (this.filePath != undefined) {
			this.upfile.param.filePath = this.filePath;
		}

		this.upfile
			.ControlFlow()
			.then(function (response) {
				if (response.status) {
					_this.$alert('上传成功！', '操作提示', {
						confirmButtonText: '确定',
						type: 'success'
					});
					_this.upfile.isUpLoad = false;
					_this.upLoadBtnText = '上传';
					let upload: any = _this.$refs.upload;
					//更改状态上传成功
					upload.uploadFiles[0].status = UpFileState.success;
					_this.upFileResult = response.data;
					_this.$emit('changeResult', _this.upFileResult);
				} else {
					_this.$alert(response.data, '操作提示', {
						confirmButtonText: '确定',
						type: 'warning'
					});
				}
			})
			.catch(function (error) {
				console.log(error);
			});
		return false;
	}
}
</script>

<style lang="scss"></style>
